<template>
    <table class="table">
        <thead>
        <tr>
            <th v-for="item in head" :key="item.id" :class="item.class" :width="item.width">{{item.label}}</th>
        </tr>
        </thead>
        <tbody>
        <slot></slot>
        </tbody>
        <tfoot v-if="head.length > 0">
        <tr>
            <td :colspan="head.length" class="clearfix">
                <button class="btn btn-primary btn-lg" v-show="insert !== undefined" @click="insertFunction">添加</button>
                <pagination :totalPage="totalPage" :currentPage="currentPage" :toPagination="redirectPagination"
                class="pagination-style"></pagination>
            </td>
        </tr>
        </tfoot>
    </table>
</template>

<script>
    import TableHeader from './TableHeader.vue';
    import Pagination from '../widget/Pagination.vue';

    export default {
        components: {
            Pagination,
            TableHeader
        },
        name: 'AdvancedTable',
        props: {
            head: {type: Array},
            colspan: {type: String | Number},
            totalPage: {type: Number},
            currentPage: {type: Number},
            redirectPagination: {type: Function},
            insert: {type: Function}
        },
        methods: {
            insertFunction () {
                if (this.insert instanceof Function) {
                    this.insert();
                }
            }
        }
    };
</script>

<style scoped lang="scss">
    .pagination-style {
        vertical-align: middle;
    }
</style>
